<template>
    <div class="company-box">
        <el-dialog
            :title="datatype == 1 ? '产品单位' : '服务单位'"
            :visible.sync="is_dialog"
            width="400px"
            top="11vh"
        >
            <div class="dialog-box">
                <div class="cpmpany-many" v-if="datatype == 1">
                    <div class="many-left">
                        <div class="title"><span>多单位</span></div>
                        <div class="explain">
                            <span>开启后1个产品最多可以选择3个单位</span>
                        </div>
                    </div>
                    <div class="many-right">
                        <el-switch
                            v-model="is_switch"
                            active-color="#3388ff"
                            inactive-color="#dcdfe6"
                            active-value="1"
                            inactive-value="2"
                            @change="setConfigureSwitch"
                        >
                        </el-switch>
                    </div>
                </div>
                <div class="list-box comm-list">
                    <div
                        class="list-row"
                        v-for="item in list_data"
                        :key="item.id"
                        @click="handleCheckedCitiesChange(item)"
                    >
                        <div class="list-left">
                            <el-checkbox
                                v-model="item.status"
                                false-label="2"
                                true-label="1"
                                >{{ item.title }}</el-checkbox
                            >
                        </div>
                        <div class="list-right">
                            <el-button
                                type="primary"
                                icon="el-icon-edit"
                                circle
                                @click.stop="setModifychildCat('2', item)"
                            ></el-button
                            ><el-button
                                type="danger"
                                icon="el-icon-delete"
                                circle
                                @click.stop="setDelCatFun(item)"
                            ></el-button>
                        </div>
                    </div>
                </div>
                <div class="add-box">
                    <el-button @click="setModifychildCat('1')"
                        >添加单位</el-button
                    >
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import config from "@/js/conf/Config.js";

export default {
    name: "company",
    props: ["datatype"],
    data() {
        return {
            is_dialog: false,
            is_switch: "2",
            checkedCities: [],
            list_data: [],
        };
    },
    created() {},
    methods: {
        async handleCheckedCitiesChange(item) {
            let data = {
                id: item.id,
                status: item.status == 1 ? "2" : "1",
            };
            await this.setSaveFun(data);
            item.status = item.status == 1 ? "2" : "1";
        },
        setConfigureSwitch(val) {
            const data = {
                key: "unit",
                is_updata: true,
            };
            this.$emit("setConfigureSwitch", data, val);
        },
        async getListFun(type = null) {
            let url =
                this.datatype == 1
                    ? config.GDPRE_UNIT_LS
                    : config.PROPRE_UNIT_LS;
            let param = {};
            let res = await this.$api({ url: url, data: param });
            if (
                res.status == 1 &&
                res.data.unit_ls &&
                res.data.unit_ls.length > 0
            ) {
                this.list_data = res.data.unit_ls;
                if (type) {
                    this.$msg({
                        title: type == 1 ? "添加成功" : "编辑成功",
                    });
                }
            }
        },
        async setSaveFun(item) {
            let url =
                this.datatype == 1
                    ? config.GDPRE_UNIT_SAVE
                    : config.PROPRE_UNIT_SAVE;
            let param = item;
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1) {
                if (item.type) {
                    this.getListFun(item.type);
                }
            }
        },
        setModifychildCat(type, data = null) {
            this.$prompt(
                "请输入单位名称",
                `${type == 1 ? "添加单位" : "编辑单位"}`,
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    inputPattern: /^.+$/,
                    inputErrorMessage: "请输入单位名称",
                    inputValue: type == 1 ? "" : data.title,
                }
            )
                .then(({ value }) => {
                    let param = {
                        id: type == 1 ? "0" : data.id,
                        title: value,
                        type,
                    };
                    this.setSaveFun(param);
                })
                .catch(() => {});
        },
        setDelCatFun(item) {
            this.$confirm("确定删除该单位吗?", "删除单位", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    let url =
                        this.datatype == 1
                            ? config.GDPRE_UNIT_DEL
                            : config.PROPRE_UNIT_DEL;
                    let param = {
                        id: item.id,
                    };
                    let res = await this.$api({ url: url, data: param });
                    if (res.status == 1) {
                        this.$msg({ title: "删除成功" });
                        this.list_data.map((v, i) => {
                            if (v.id == item.id) {
                                this.list_data.splice(i, 1);
                            }
                        });
                    }
                })
                .catch(() => {});
        },
    },
};
</script>

<style lang="scss" scoped>
.company-box {
    .dialog-box {
        .cpmpany-many {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-radius: 5px;
            border: 1px #efdede solid;
            padding: 5px 10px;

            .many-left {
                font-size: 12px;
                .title {
                    font-size: 14px;
                }
                .explain {
                    color: #9d9d9d;
                }
            }
        }
        .list-box {
            height: 500px;
            overflow: auto;
            margin-top: 10px;
            .list-row {
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: 50px;
                border-bottom: 1px #f7f7f7 solid;
                padding: 5px 10px;
                cursor: pointer;
                &:hover {
                    background: #f7f7f7;
                }
                ::v-deep.list-left {
                    .el-checkbox {
                        max-width: 200px;
                        display: block;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        pointer-events: none;
                    }
                }
                ::v-deep.list-right {
                    .el-button {
                        padding: 5px;
                        font-size: 12px;
                    }
                }
            }
        }
        ::v-deep.add-box {
            margin-top: 10px;
            .el-button {
                width: 100%;
                color: #459ffd;
                border-color: #459ffd;
            }
        }
    }
}
</style>